/*
  学习目标：深入props-children属性
  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/*  1. 匿名插槽 */}
        <ChildNoName>
          <span>一行白鹭上青天</span>
        </ChildNoName>
        <ChildNoName />
        {/*   2. 具名插槽 */}
        <ChildHasName>
          {{ title: '蜀道难', content: '难于上青天' }}
        </ChildHasName>
        <ChildHasName>
          {{ title: '鹅鹅鹅', content: '曲项向天歌' }}
        </ChildHasName>

        {/* 3. 作用域插槽 */}
        <ChildScoped>
          {(data) => {
            return data.map((item) => <i>{item}</i>);
          }}
        </ChildScoped>
        <ChildScoped>{(data) => <button>{data}</button>}</ChildScoped>
      </div>
    );
  }
}

class ChildScoped extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  render() {
    const { children } = this.props;
    const { list } = this.state;
    return (
      <div>
        <h1>{children(list)}</h1>
      </div>
    );
  }
}

function ChildHasName({ children }) {
  return (
    <div>
      <h1>名字- {children.title}</h1>
      <div>内容- {children.content}</div>
    </div>
  );
}

function ChildNoName({ children = '鹅鹅鹅' }) {
  return (
    <div>
      <h1>{children}</h1>
    </div>
  );
}

// children: 组件标签夹着的内容区域
// 不传children为undefined
